<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.css" rel="stylesheet" />
		<link href="../../css/style.css" rel="stylesheet" />
		<link href="../../css/ui.min.css" rel="stylesheet" />
		<link href="../../css/iconfont.css" rel="stylesheet" />
		<link href="../../css/shop.css" rel="stylesheet" />
	</head>
	<style>
		.mui-bar-nav {
			box-shadow:none;
		}
		.mui-icon-arrowright{
			color: white;
			font-size: 14px;
			position: absolute;
			right: 10px;
			margin-top: 7px;
		}
		.icon-guanbi{
			position: relative;
			top: 0;
			left: 95%;
		}
	</style>
	<body>
		<script src="../../js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<header class="mui-bar mui-bar-nav" style="position:relative;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		</header>
		<div class="head-bot-box">
			<div class="head-bot-tx">
				<img src="../../images/tx.jpg" alt="">
			</div>
			<div class="head-bot-right">
				<div class="stores-title">迎泽区一店</div>
				<div class="stores-time">
					35分钟 | 2km
					<span></span>
				</div>
				<div class="stores-xiaoxi">
					今日促销西红柿3.5元/斤
					<span class="mui-icon mui-icon-arrowright"></span>
				</div>
			</div>
		</div>
		<!--搜索-->
		<div class="ui-search-bar" id="searchBar" style="height: 47px;">
			<form class="ui-search-bar__form">
				<div class="ui-search-bar__box">
					<i class="iconfont icon-sousuo"></i>
					<input type="search" class="ui-search-bar__input" id="searchInput" placeholder="搜索" required/>
					<a href="javascript:" class="ui-icon-clear iconfont icon-close-copy" id="searchClear"></a>
				</div>
				<label class="ui-search-bar__label" id="searchText">
		    <i class="iconfont icon-sousuo"></i>
		    <span>搜索</span>
		</label>
			</form>
			<a href="javascript:;" class="ui-search-bar__cancel-btn" id="searchCancel">取消</a>
		</div>
		<!--分类-->
		<div class="category-main" style="top: 15.1rem;">
				<div class="c-sidebar">
					<ul class="cate-nav">
						<li class="active">
							<a href="javascript:;">促销商品</a>
						</li>
						<li>
							<a href="javascript:;">蔬菜区</a>
						</li>
						<li>
							<a href="javascript:;">肉禽蛋类</a>
						</li>
						<li>
							<a href="javascript:;">水产区</a>
						</li>
						<li>
							<a href="javascript:;">水果区</a>
						</li>
						<li>
							<a href="javascript:;">粮油区</a>
						</li>
						<li>
							<a href="javascript:;">酒水饮料</a>
						</li>
					</ul>
				</div>
				<div class="cate-scroll">
					<div class="cate-cells">
						<div class="cate-title">促销商品</div>
						<ul class="cate-goods">
							<li id="shopping_show.html">
								<a href="" class="cate-gbox">
									<img src="../../images/1.jpg" alt="">
									<div class="cate-tit">白菜</div>
								</a>
							</li>
							<li id="shopping_show.html">
								<a href="" class="cate-gbox">
									<img src="../../images/2.jpg" alt="">
									<div class="cate-tit">西红柿</div>
								</a>
							</li>
							<li id="shopping_show.html">
								<a href="" class="cate-gbox">
									<img src="../../images/3.jpg" alt="">
									<div class="cate-tit">白菜</div>
								</a>
							</li>
							<li id="shopping_show.html">
								<a href="" class="cate-gbox">
									<img src="../../images/4.jpg" alt="">
									<div class="cate-tit">西红柿</div>
								</a>
							</li>
							<li id="shopping_show.html">
								<a href="" class="cate-gbox">
									<img src="../../images/1.jpg" alt="">
									<div class="cate-tit">白菜</div>
								</a>
							</li>
							<li id="shopping_show.html">
								<a href="" class="cate-gbox">
									<img src="../../images/2.jpg" alt="">
									<div class="cate-tit">西红柿</div>
								</a>
							</li>
							<li id="shopping_show.html">
								<a href="" class="cate-gbox">
									<img src="../../images/3.jpg" alt="">
									<div class="cate-tit">白菜</div>
								</a>
							</li>
							<li id="shopping_show.html">
								<a href="" class="cate-gbox">
									<img src="../../images/4.jpg" alt="">
									<div class="cate-tit">西红柿</div>
								</a>
							</li>
							<li id="shopping_show.html">
								<a href="" class="cate-gbox">
									<img src="../../images/1.jpg" alt="">
									<div class="cate-tit">白菜</div>
								</a>
							</li>
							<li id="shopping_show.html">
								<a href="" class="cate-gbox">
									<img src="../../images/2.jpg" alt="">
									<div class="cate-tit">西红柿</div>
								</a>
							</li>
							<li id="shopping_show.html">
								<a href="" class="cate-gbox">
									<img src="../../images/3.jpg" alt="">
									<div class="cate-tit">白菜</div>
								</a>
							</li>
							<li id="shopping_show.html">
								<a href="" class="cate-gbox">
									<img src="../../images/4.jpg" alt="">
									<div class="cate-tit">西红柿</div>
								</a>
							</li>
						</ul>
					</div>
					<div class="cate-cells" style="display: none;">
						<div class="cate-title">蔬菜区</div>
						<ul class="cate-goods">
							<li id="shopping_show.html">
								<a href="" class="cate-gbox">
									<img src="../../images/1.jpg" alt="">
									<div class="cate-tit">白菜</div>
								</a>
							</li>
							<li id="shopping_show.html">
								<a href="" class="cate-gbox">
									<img src="../../images/2.jpg" alt="">
									<div class="cate-tit">西红柿</div>
								</a>
							</li>
							<li id="shopping_show.html">
								<a href="" class="cate-gbox">
									<img src="../../images/3.jpg" alt="">
									<div class="cate-tit">白菜</div>
								</a>
							</li>
							<li id="shopping_show.html">
								<a href="" class="cate-gbox">
									<img src="../../images/4.jpg" alt="">
									<div class="cate-tit">西红柿</div>
								</a>
							</li>
							<li id="shopping_show.html">
								<a href="" class="cate-gbox">
									<img src="../../images/1.jpg" alt="">
									<div class="cate-tit">白菜</div>
								</a>
							</li>
						</ul>
					</div>
					<div class="cate-cells" style="display: none;">
						<div class="cate-title">肉禽蛋类</div>
						<ul class="cate-goods">
							<li id="shopping_show.html">
								<a href="" class="cate-gbox">
									<img src="../../images/1.jpg" alt="">
									<div class="cate-tit">白菜</div>
								</a>
							</li>
							<li id="shopping_show.html">
								<a href="" class="cate-gbox">
									<img src="../../images/2.jpg" alt="">
									<div class="cate-tit">西红柿</div>
								</a>
							</li>
							<li id="shopping_show.html">
								<a href="" class="cate-gbox">
									<img src="../../images/3.jpg" alt="">
									<div class="cate-tit">白菜</div>
								</a>
							</li>
						</ul>
					</div>
					<div class="cate-cells" style="display: none;">
						<div class="cate-title">水产区</div>
						<ul class="cate-goods">
							<li id="shopping_show.html">
								<a href="" class="cate-gbox">
									<img src="../../images/3.jpg" alt="">
									<div class="cate-tit">白菜</div>
								</a>
							</li>
							<li id="shopping_show.html">
								<a href="" class="cate-gbox">
									<img src="../../images/2.jpg" alt="">
									<div class="cate-tit">西红柿</div>
								</a>
							</li>
							<li id="shopping_show.html">
								<a href="" class="cate-gbox">
									<img src="../../images/1.jpg" alt="">
									<div class="cate-tit">白菜</div>
								</a>
							</li>
						</ul>
					</div>
					<div class="cate-cells" style="display: none;">
						<div class="cate-title">水果区</div>
						<ul class="cate-goods">
							<li id="shopping_show.html">
								<a href="" class="cate-gbox">
									<img src="../../images/1.jpg" alt="">
									<div class="cate-tit">白菜</div>
								</a>
							</li>
							<li id="shopping_show.html">
								<a href="" class="cate-gbox">
									<img src="../../images/2.jpg" alt="">
									<div class="cate-tit">西红柿</div>
								</a>
							</li>
							<li id="shopping_show.html">
								<a href="" class="cate-gbox">
									<img src="../../images/3.jpg" alt="">
									<div class="cate-tit">白菜</div>
								</a>
							</li>
						</ul>
					</div>
					<div class="cate-cells" style="display: none;">
						<div class="cate-title">粮油区</div>
						<ul class="cate-goods">
							<li id="shopping_show.html">
								<a href="" class="cate-gbox">
									<img src="../../images/1.jpg" alt="">
									<div class="cate-tit">白菜</div>
								</a>
							</li>
							<li id="shopping_show.html">
								<a href="" class="cate-gbox">
									<img src="../../images/2.jpg" alt="">
									<div class="cate-tit">西红柿</div>
								</a>
							</li>
							<li id="shopping_show.html">
								<a href="" class="cate-gbox">
									<img src="../../images/3.jpg" alt="">
									<div class="cate-tit">白菜</div>
								</a>
							</li>
						</ul>
					</div>
					<div class="cate-cells" style="display: none;">
						<div class="cate-title">酒水饮料</div>
						<ul class="cate-goods">
							<li id="shopping_show.html">
								<a href="" class="cate-gbox">
									<img src="../../images/1.jpg" alt="">
									<div class="cate-tit">白菜</div>
								</a>
							</li>
							<li id="shopping_show.html">
								<a href="" class="cate-gbox">
									<img src="../../images/2.jpg" alt="">
									<div class="cate-tit">西红柿</div>
								</a>
							</li>
							<li id="shopping_show.html">
								<a href="" class="cate-gbox">
									<img src="../../images/3.jpg" alt="">
									<div class="cate-tit">白菜</div>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		
			<!--配送-->
			<div class="distribution-box">
				<div class="distribution">
					<span class="mui-icon iconfont icon-guanbi"></span>
					<div class="distribution-content">
						<div class="distribution-one">
							<div class="distribution-title">配送</div>
							<div class="distribution-one-content">配送时间：00：00-01：00、09：30-23：30</div>
						</div>
						<div class="distribution-one">
							<div class="distribution-title">公告</div>
							<div class="distribution-one-content">最专业的水果外卖，新鲜看的见</div>
						</div>
					</div>
				</div>
			</div>
		<script src="../../js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/common.js" type="text/javascript" charset="utf-8"></script>
		<!--搜索-->
		<script type="text/javascript">
			$(function() {
				var $searchBar = $('#searchBar'),
					$searchText = $('#searchText'),
					$searchInput = $('#searchInput'),
					$searchClear = $('#searchClear'),
					$searchCancel = $('#searchCancel');
		
				function hideSearchResult() {
					$searchInput.val('');
				}
		
				function cancelSearch() {
					hideSearchResult();
					$searchBar.removeClass('ui-search-bar_focusing');
					$searchText.show();
				}
		
				$searchText.on('click', function() {
					$searchBar.addClass('ui-search-bar_focusing');
					$searchInput.focus();
				});
				$searchInput
					.on('blur', function() {
						if(!this.value.length) cancelSearch();
					});
				$searchClear.on('click', function() {
					hideSearchResult();
					$searchInput.focus();
				});
				$searchCancel.on('click', function() {
					cancelSearch();
					$searchInput.blur();
				});
			});
			mui(".cate-goods").on("tap", "li", function() {
				var url = this.getAttribute("id"); //getAttribute()获取属性函数
				mui.openWindow({
					url: url,
					id: url,
					styles: {
						top: '0px', //新页面顶部位置
						bottom: '0px', //新页面底部位置
						popGesture: 'close'
					},
					extras: {},
					waiting: {
						autoShow: false
					}
				})
			});
			$(function(){
				$(".stores-xiaoxi").click(function(){
					$(".distribution-box").show();
				});
				$(".icon-guanbi").click(function(){
					$(".distribution-box").hide();
				});
			});
		</script>
		
	</body>

</html>
